import React, { useState } from 'react'
import { Select, Space,Checkbox,Input,Button,Table,Modal,Switch,Drawer,Tabs   } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import './kj.css'

// select选择器
const handleChange = (value) => {
  console.log(`selected ${value}`);
};



const onChange = (checkedValues) => {
  console.log('checked = ', checkedValues);
};
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  {
    label: 'Apple',
    value: 'Apple',
  },
  {
    label: 'Pear',
    value: 'Pear',
  },
  {
    label: 'Orange',
    value: 'Orange',
  },
];
const optionsWithDisabled = [
  {
    label: 'Apple',
    value: 'Apple',
  },
  {
    label: 'Pear',
    value: 'Pear',
  },
  {
    label: 'Orange',
    value: 'Orange',
    disabled: false,
  },
];

// tab切换
const items = [
  {
    key: '1',
    label: '定价',
    children: <div style={{display:'flex',justifyContent:'center'}}><img style={{width:"290px"}} src={require('../../../static/images/wt.png')} alt="" /></div>,
  },
  {
    key: '2',
    label: '租控',
    children: <div style={{display:'flex',justifyContent:'center'}}><img style={{width:"290px"}} src={require('../../../static/images/wt.png')} alt="" /></div>,
  },
  {
    key: '3',
    label: '租约',
    children: '租约',
  },
  {
    key: '4',
    label: '账单',
    children: '账单',
  },
];
export default function KJ() {
  
  
  let [msg,setMsg] = useState('');
  const dataSource = [
    {
      key: '1',
      name: '303',
      lou: '国贸一期B座',
      floor: '3层',
      area:'300.02',
      fitment:'精装',
      direction:'东'
    },
    {
      key: '2',
      name: '305',
      lou: '国贸一期A座',
      floor: '3层',
      area:'300.02',
      fitment:'精装',
      direction:'东',
      status:'上架中'
    },
    {
      key: '3',
      name: '204',
      lou: '国贸一期B座',
      floor: '3层',
      area:'300.02',
      fitment:'精装',
      direction:'东',
      status:'上架中'
    },
    {
      key: '4',
      name: '406',
      lou: '国贸一期A座',
      floor: '3层',
      area:'300.02',
      fitment:'精装',
      direction:'东',
      status:'上架中'
    },
    {
      key: '5',
      name: '301',
      lou: '国贸一期B座',
      floor: '3层',
      area:'300.02',
      fitment:'精装',
      direction:'东',
      status:'上架中',
    },
  ];
  
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      className:'name'
    },
    {
      title: '楼宇',
      dataIndex: 'lou',
      key: 'lou',
    },
    {
      title: '楼层',
      dataIndex: 'floor',
      key: 'floor',
    },
    {
      title:'面积m²',
      dataIndex: 'area',
      key: 'area',
    },
    {
      title:'装修',
      dataIndex: 'fitment',
      key: 'fitment',
    },
    {
      title:'朝向',
      dataIndex: 'direction',
      key: 'direction',
    },
    {
      title:'状态',
      dataIndex: 'status',
      key: 'status',
      render(_, record){
        return  <div direction="vertical">
        <Switch checkedChildren="上架中" unCheckedChildren="已下架" defaultChecked />
      </div>
      },
    },
    {
      title:'操作',
      dataIndex: 'actions',
      key: 'actions',
      render(_, record){
        return <div><img onClick={()=>{
          showLargeDrawer();
          setMsg(record);
          console.log(record);
        }} src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
      }
    }
  ];
  // 抽屉
const [open, setOpen] = useState(false);
const [size, setSize] = useState(720);
const showDefaultDrawer = () => {
  setSize('default');
  setOpen(true);
};
const showLargeDrawer = () => {
  setSize('large');
  setOpen(true);
};
const onClose = () => {
  setOpen(false);
};
  // 单选框
  const [value, setValue] = useState(1);
  const [value1, setValue1] = useState(1);
  const [value2, setValue2] = useState(1);
  // 状态
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  // 装修
  const onChange1 = (e) => {
    console.log('radio checked', e.target.value);
    setValue1(e.target.value);
  };
  // 朝向
  const onChange2 = (e) => {
    console.log('radio checked', e.target.value);
    setValue2(e.target.value);
  };
  const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const handleChange = (value) => {
        console.log(`selected ${value}`);
      };
      const option=[
        {
            value: 'jack',
            label: 'Jack',
        },
        {
            value: 'lucy',
            label: 'Lucy',
        },
        {
            value: 'Yiminghe',
            label: 'yiminghe',
        },
        {
            value: 'disabled',
            label: 'Disabled'
        },
    ]
    const option2=[
        {
            value: 'jack',
            label: 'Jack',
        },
        {
            value: 'lucy',
            label: 'Lucy',
        },
        {
            value: 'Yiminghe',
            label: 'yiminghe',
        },
        {
            value: 'disabled',
            label: 'Disabled'
        },
    ]
    const option3=[
        {
            value:'+86',
            label:'+86'
        }
    ]
  return (
    <>
      <div className='kj'>
        <button className='btn' onClick={showModal}>新建空间</button>
          <div className='cont'>
              <div className='msg'>
                {/* 选择器 */}
                <div className='sel'>
                  <Space wrap>
                    <Select
                      defaultValue="请选择楼宇"
                      style={{
                        width: 210,
                        backgroundColor: '#F8FBFF',
                        borderColor:'#E1E8EE',
                        borderRadius:2
                      }}
                      onChange={handleChange}
                      options={[
                        {
                          value: 'jack',
                          label: 'Jack',
                        },
                        {
                          value: 'lucy',
                          label: 'Lucy',
                        },
                        {
                          value: 'Yiminghe',
                          label: 'yiminghe',
                        },
                        {
                          value: 'disabled',
                          label: 'Disabled',
                          disabled: true,
                        },
                      ]}
                    />
                    <Select
                      defaultValue="请选择楼层"
                      style={{
                        width: 120,
                        backgroundColor: '#F8FBFF',
                        borderColor:'#E1E8EE',
                        borderRadius:2
                      }}
                      options={[
                        {
                          value: 'lucy',
                          label: 'Lucy',
                        },
                      ]}
                    />
                    <Select
                      defaultValue="请输入空间名称"
                      style={{
                        width: 299,
                        backgroundColor: '#F8FBFF',
                        borderColor:'#E1E8EE',
                        borderRadius:2
                      }}
                      options={[
                        {
                          value: 'lucy',
                          label: 'Lucy',
                        },
                      ]}
                    />
                  </Space>
                </div>
                {/* 状态 */}
                <div>
                  <span>状态</span>
                <Checkbox.Group>
                  <Checkbox value="A">上架中</Checkbox>
                  <Checkbox value="B">已上架</Checkbox>
                </Checkbox.Group>
                </div>
                {/* 面积 */}
                <div>
                  <span>面积</span>
                  <Space>
                    <Input />
                    <span style={{color:'#000'}}>m² ~</span>
                    <Input />
                  </Space>
                </div>
                {/* 装修 */}
                <div>
                  <span>装修</span>
                  <Checkbox.Group>
                    <Checkbox value="A">毛胚</Checkbox>
                    <Checkbox value="B">简装</Checkbox>
                    <Checkbox value="C">精装</Checkbox>
                  </Checkbox.Group>
                </div>
                {/* 朝向 */}
                <div>
                  <span>朝向</span>
                  <Checkbox.Group>
                    <Checkbox value="A">东</Checkbox>
                    <Checkbox value="B">南</Checkbox>
                    <Checkbox value="C">西</Checkbox>
                    <Checkbox value="D">北</Checkbox>
                    <Checkbox value="E">东南</Checkbox>
                    <Checkbox value="F">西南</Checkbox>
                    <Checkbox value="G">东北</Checkbox>
                    <Checkbox value="H">西北</Checkbox>
                  </Checkbox.Group>
                </div>
                {/* 按钮 */}
                <div className='edit'>
                    <div>
                      <Button className='btn2'>查询</Button>
                      <Button className='btn3'>重置</Button>
                    </div>
                </div>
              </div>
              <div className='table'>
                <Table dataSource={dataSource} columns={columns} />;
              </div>
          </div>
            <Modal title="新建空间" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText={'取消'} okText={'保存'}>
            <div className="addNew">
                <p><span>* </span> 空间名称</p>
                <Input className='name' placeholder="请输入" />
                <div className='floor'>
                  <div>
                    <p><span>* </span> 所属楼宇</p>
                    <Select 
                    defaultValue="lucy"
                    style={{
                      width: 206,
                    }}
                    allowClear
                    options={[
                      {
                        value: 'lucy',
                        label: 'Lucy',
                      },
                    ]}
                    />
                  </div>
                  <div>
                    <p><span>*</span>所属楼层</p>
                    <Select 
                    defaultValue="lucy"
                    style={{
                      width: 206,
                      background:'#F8FBFF',
                      borderRadius:'2px'
                    }}
                    allowClear
                    options={[
                      {
                        value: 'lucy',
                        label: 'Lucy',
                      },
                    ]}
                    />
                  </div>
                </div>
                <div className='bot'>
                  <p><span>* </span> 面积 m²</p>
                  <Input className='name' placeholder=" 面积（㎡）" />
                  <div className='floor'>
                    <div>
                      <p>装修</p>
                      <Select 
                      defaultValue="lucy"
                      style={{
                        width: 206,
                        background:'#F8FBFF',
                        borderRadius:'2px'
                      }}
                      allowClear
                      options={[
                        {
                          value: 'lucy',
                          label: 'Lucy',
                        },
                      ]}
                      />
                    </div>
                    <div>
                      <p>朝向</p>
                      <Select 
                      defaultValue="lucy"
                      style={{
                        width: 206,
                        background:'#F8FBFF',
                        borderRadius:'2px'
                      }}
                      allowClear
                      options={[
                        {
                          value: 'lucy',
                          label: 'Lucy',
                        },
                      ]}
                      />
                    </div>
                  </div>
                  <p>空间备注</p>
                  <textarea className='text'></textarea>
                </div>
            </div>
          </Modal>
          <div className='draw'>
                <Drawer
                title={`${msg.lou}`}
                placement="right"
                size={size}
                onClose={onClose}
                open={open}
                extra={
                  <Space>
                    <Button type='text' style={{color:'#8479E3'}} onClick={onClose}>编辑</Button>
                    <Button type="text" danger onClick={onClose}>
                      删除
                    </Button>
                  </Space>
                }
              >
                <div className='message'>
                  <div className='message1'>
                    <div>
                      <p>面积</p>
                      <p>{msg.area}m²</p>
                    </div>
                    <div>
                      <p>装修</p>
                      <p>{msg.fitment}</p>
                    </div>
                    <div>
                      <p>朝向</p>
                      <p>{msg.direction}</p>
                    </div>
                  </div>
                  <div className='message2'>
                    <p>空间备注</p>
                    <p>国贸大厦与国贸展览中心、国贸商城、中国大饭店及国贸饭店、国贸公寓共同构成总建筑面积达五十
  六万平方米的中国国际贸易中心。卓越的办公环境、先进的科技设施、完善的配套服务、优越的商业
  氛围以及丰富的物业管理经验，令国贸写字楼成为众多国内外客户理所当然的至优之选。</p>
                    <p>创建人：<span>李明海</span>           创建时间：<span>2019-08-20 10:30:28</span></p>
                  </div>
                  <div className='message3'>
                    <Tabs items={items}/>
                  </div>
                </div>
              </Drawer>
          </div>
      </div>
    </>
    
  )
}
